<!-- BrowserTabs.vue -->
<script setup lang="ts">
import { PlusOutlined } from '@ant-design/icons-vue';
import { Tabs } from 'ant-design-vue';
import { ref, watch } from 'vue';
import { useRoute } from 'vue-router';

// 定义 Key 类型
type Key = string | number;

// 定义标签页接口
interface Tab {
  key: string;
  title: string;
  url: string;
}

const props = defineProps<{
  iframeUrl: { url: string; timestamp: number } | null;
}>();
const route = useRoute();
const activeKey = ref<Key>('1');
const tabs = ref<Tab[]>([
  {
    key: '1',
    title: '默认页面',
    // url: 'https://ilink.bupt.edu.cn/https_test/bigdata.10086.cn/honghu/se/#/home', // 默认页面 URL
    // url: 'https://ilink.bupt.edu.cn/https_test/www.bilibili.com/', // 默认页面 URL
    url: route.query.practiceUrl as string,
  },
]);

// console.log('Tab URL:', tabs.value[0].url);

// 添加新标签页
const addTab = (url: string) => {
  const newKey = `${Date.now()}`; // 确保 key 是字符串
  const newTab: Tab = {
    key: newKey,
    title: `页面 ${tabs.value.length + 1}`,
    url,
  };
  tabs.value.push(newTab);
  activeKey.value = newKey;
};

// 监听 iframeUrl 的变化，添加新标签页
watch(
  () => props.iframeUrl?.timestamp,
  () => {
    const newIframeUrl = props.iframeUrl;
    if (newIframeUrl)
      addTab(newIframeUrl.url);
  },
);

// 处理标签页切换
const onTabChange = (key: Key) => {
  activeKey.value = key;
};

// 删除标签页
const removeTab = (targetKey: Key) => {
  const index = tabs.value.findIndex(
    tab => tab.key === targetKey.toString(),
  );
  if (index !== -1) {
    tabs.value.splice(index, 1);
    // 如果删除的是当前激活的标签页，切换到前一个标签页
    if (activeKey.value === targetKey && tabs.value.length) {
      const newActiveIndex = index > 0 ? index - 1 : 0;
      activeKey.value = tabs.value[newActiveIndex].key;
    }
  }
};

// 处理标签页的编辑（新增和删除）
const onEdit = (
  key: Key | MouseEvent | KeyboardEvent,
  action: 'add' | 'remove',
) => {
  if (action === 'add')
    addTab('https://www.example.com/');
  else if (
    action === 'remove'
    && (typeof key === 'string' || typeof key === 'number')
  )
    removeTab(key);
};
</script>

<template>
  <div class="browser-tabs">
    <Tabs
      v-model:active-key="activeKey"
      type="editable-card"
      @change="onTabChange"
      @edit="onEdit"
    >
      <template #addIcon>
        <PlusOutlined />
      </template>
      <template v-for="tab in tabs" :key="tab.key">
        <Tabs.TabPane :tab="tab.title" closable>
          <div class="tab-content">
            <iframe
              v-if="tab.url"
              :src="tab.url"
              frameborder="0"
              style="width: 100%; height: calc(100vh - 150px);"
            />
          </div>
        </Tabs.TabPane>
      </template>
    </Tabs>
  </div>
</template>

<style scoped>
.browser-tabs {
  width: 100%;
  height: 100%;
  display: flex;
}

:deep(.ant-tabs) {
  width: 100%;
  margin-top: 0.5rem;
}

:deep(.ant-tabs-nav) {
  margin: 0 !important;
}

:deep(.ant-tabs-nav-wrap) {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.tab-content {
  padding: 10px;
  background-color: #f9f9f9;
}

.url-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.url-bar .ant-input {
  flex: 1;
}
</style>
